<template>
	<view class="loginbox bj_between">
		<view class="bj_between">
			<image src="/static/top/1.png" style="width: 32rpx;margin-right: 24rpx;" mode="widthFix" @click="opmu">
			</image>
			<image src="/static/top/2.png" style="width: 196rpx;" mode="widthFix"></image>
		</view>
		<view class="bj_between">
			<view class="loginbtn btn1" v-if="userInfo == null" @click="opgc(1)">
				{{$t("toptxt1")}}
			</view>
			<view class="loginbtn btn2" v-if="userInfo == null" @click="opgc(2)">
				{{$t("toptxt2")}}
			</view>
			<image src="/static/top/3.png" style="width: 32rpx;" mode="widthFix"></image>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		inject
	} from 'vue';
	import {
		onShow
	} from "@dcloudio/uni-app"
	import useI18n from '@/store/useI18n.js'
	const {
		t,
		changeLanguage
	} = useI18n()
	// 打开盖层
	const opgc = inject("opgc");

	let userInfo = ref({})
	onShow(function() {
		userInfo.value = getApp().globalData.userInfo
	})

	function opmu() {
		if (userInfo.value == null) {
			opgc(0)
		} else {
			opgc(0)
		}
	}
</script>

<style scoped lang="scss">
	.loginbox {
		background: #52091A;
		height: 88rpx;
		position: sticky;
		left: 0;
		width: 100%;
		top: 0;
		z-index: 9999;
		padding: 0 32rpx 0 20rpx;

		.loginbtn {
			width: 146rpx;
			height: 60rpx;
			border-radius: 16rpx;
			font-size: 24rpx;
			text-align: center;
			line-height: 60rpx;
		}

		.btn1 {
			background: #E9C86F;
			border: 2rpx solid #E9C86F;
			color: #52091A;
			margin-right: 10rpx;
		}

		.btn2 {
			border: 2rpx solid #FFFFFF;
			color: #FFFFFF;
			margin-right: 20rpx;
		}
	}
</style>